<template>
  <div>
    <div class="index_box">
      <HeadView />
      <img class="homeimg" src="@/assets/img/homebg.svg" alt="" srcset="">
        <h2><span class="blue">Building your own community <br> identity like a brand</span></h2>
        <div class="dec_div">
          <p><el-icon color="#fff" class="el-input__icon"><Select /></el-icon> Decentralized</p>
          <p><el-icon color="#fff" class="el-input__icon"><Select /></el-icon> Cross-chain</p>
          <p><el-icon color="#fff" class="el-input__icon"><Select /></el-icon> Censorship-resistant</p>
          <p><el-icon color="#fff" class="el-input__icon"><Select /></el-icon> Open source</p>
        </div>
        <div class="search_box">
          <el-input v-model="input" @keyup.enter="onSearch()" class="s_input" placeholder="Search" size="large">
            <template #prefix>
              <el-icon class="el-input__icon"><Search /></el-icon>
            </template>
          </el-input>
          <div @click="onSearch()" class="connect">Search</div>
        </div>
        <p v-if="err" class="err_text">{{err}}</p>
    </div>
    <div class="index_con">
      <div class="contents">
        <div>
          <el-row :gutter="20" align="middle" class="everyone">
            <el-col :span="9">
              <p>Everyone should have a WEB3 identity.<br> Publicization is the paradigm that .web3 should have.</p>
            </el-col>
            <el-col :span="5">
              <div>
                <h6>700</h6>
                <span>SDID</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div>
                <h6>1,200</h6>
                <span>Owners</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div>
                <h6>500</h6>
                <span>Eco-members</span>
              </div>
            </el-col>
          </el-row>
          <!-- <p>Everyone should have a WEB3 identity. Publicization is the paradigm that .web3 should have.</p>
          <div>
            <h6>700</h6>
            <span>SDID</span>
          </div>
          <div>
            <h6>700</h6>
            <span>SDID</span>
          </div>
          <div>
            <h6>700</h6>
            <span>SDID</span>
          </div> -->
        </div>
        <div class="index_one">
          <div class="tit">
            <p>GET IT FOR FREE, USE IT FOR LIFE</p>
            <span>DID, he shouldn't be artificially shackled to annual payments. let's break it</span>
          </div>
          <div class="bg_index bg_index1">
            <div>
              <img src="@/assets/img/index1.svg" alt="" srcset="">
            </div>
            <div>
              <img src="@/assets/img/index2.svg" alt="" srcset="">
            </div>
          </div>
        </div>
        <div class="index_tow">
          <div class="tit">
            <p>SDID PROVIDES USERS WITH CONTROL, SECURITY,<br> PRIVACY AND PORTABILITY</p>
            <span>With widespread adoption of the SDID standard, individuals are not locked into a single <br> ecosystem or siloed data container.</span>
          </div>
          <img src="@/assets/img/index3.svg" alt="" srcset="">
        </div>
        <div class="index_thr">
          <div class="tit">
            <p>SEER CREATES A SHARED, FLEXIBLE AND RESILIENT <br> IDENTITY LAYER</p>
            <span>SDID documents contain relevant information to enable use cases such as login,<br> data encryption, on-chain communication, etc.</span>
          </div>
          <img src="@/assets/img/index4.svg" alt="" srcset="">
        </div>
        <div class="index_for">
          <div class="tit1">
            <p>OWN .WEB3</p>
            <p>ENJOY WEB3 LIFE</p>
          </div>
          <div class="contents">
            <el-row>
              <el-col :span="24">
                <div class="life bg_index1 flex">
                  <div>
                    <span class="gre">#1</span>
                    <p>Send end-to-end</p>
                    <p>encrypted messages to</p>
                    <p>.web3 friends on SEER</p>
                  </div>
                  <img src="@/assets/img/im1.png" alt="" srcset="">
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <div class="life life2 bg_index1 flex">
                  <div>
                    <span>#2</span>
                    <p>Your .web3, your unified</p>
                    <p>username in different DApps.</p>
                  </div>
                  <img src="@/assets/img/im2.png" alt="" srcset="">
                </div>
              </el-col>
              <el-col :span="12">
                <div class="life life2 bg_index1 flex">
                  <div class="small">
                    <span>#3</span>
                    <p>Give your community members your sub-account to bring them closer.</p>
                    <p>Launched in the fourth quarter of 2022.</p>
                  </div>
                  <img src="@/assets/img/im3.png" alt="" srcset="">
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="16">
                <div class="life life3 bg_index1 flex">
                  <div>
                    <span class="grep">#4</span>
                    <p>Your .web3, your decentralized personal account.</p>
                  </div>
                  <img src="@/assets/img/im4.png" alt="" srcset="">
                </div>
              </el-col>
              <el-col :span="8">
                <div class="life life3 bg_index1 flex">
                  <div class="small">
                    <span class="grep">#5</span>
                    <p><b>Authenticity of NFT </b>creators</p>
                    <p>Eliminate fraud and copying by allowing creators to prove ownership of their social media accounts, websites and other blockchain addresses</p>
                  </div>
                  <img src="@/assets/img/im5.png" alt="" srcset="">
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <div class="life life2 bg_index1 flex life4">
                  <div>
                    <span>#6</span>
                    <p>Private mining pools for DeFi</p>
                    <p class="smallp">Reduce staking rates and build institutional-only pools by defining membership criteria.</p>
                  </div>
                  <img src="@/assets/img/im6.png" alt="" srcset="">
                </div>
              </el-col>
              <el-col :span="12">
                <div class="life life2 bg_index1 flex life4">
                  <div>
                    <span>#7</span>
                    <p>The DAO's Cross-Chain Reputation</p>
                    <p class="smallp">Ensure they are the best person for the job or delegation by collecting and validating their credentials and other DAO activities.</p>
                  </div>
                  <img src="@/assets/img/im7.png" alt="" srcset="">
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="index_fiv">
          <div class="tit">
            <p>Publicization is the future of .web3</p>
          </div>
          <img src="@/assets/img/index5.svg" alt="" srcset="">
        </div>
      </div>
      <LinkView />
    </div>
  </div>
</template>

<script>
import { Search , Select } from '@element-plus/icons'
import HeadView from '@/components/HeadView.vue'
import LinkView from '@/components/LinkView.vue'
// import { ElMessage } from 'element-plus'
export default {

  data(){
    return {
      input: '',
      err:null
    }
  },
  mounted(){
    // this.$loadinga()
  },
  methods:{
    onSearch(){
      let re =  /^[0-9a-zA-Z]*$/;
      if(this.input == '' || null){
        // ElMessage.error('')
        this.err = 'Input Null , Please input'
        return
      }if (!re.test(this.input)){
        this.err = 'Only numbers and letters are allowed'
        // ElMessage.error('Only numbers and letters are allowed')
        return
      }else{
        this.err = null
        this.$router.push({path:'/search',query: {id:this.input}})
      }
    },
  },
  components:{
    HeadView,
    Search,
    Select,
    LinkView
  }
}
</script>

<style lang="less" scoped>
.homeimg{padding-top: 80px;}
.index_con{
  .tit{
      text-align: center;
      p{color: #2481E2;font-size: 34px;font-weight: 600;}
      span{color: #71C297;font-size: 14px;display: inline-block;margin-top: 15px;margin-bottom: 60px;}
    }
    .tit1{
      width: 480px;
      margin: 0 auto 60px;
      p{
        color: #2481E2;font-size: 34px;font-weight: 600;text-align: left;
        &:nth-last-child(1){
          text-align: right;
        }
      }
    }
  .bg_index{
    padding: 36px;
    margin: 0 auto;
    width: 580px;
    background: linear-gradient(180deg, #10E9DC 5%, #28BFFF);
    border-radius: 12px;
  }
  .bg_index1{
    background: linear-gradient(135deg, #28BFFF 5%, #10E9DC,#28BFFF);
    border-radius: 12px;
  }
  .everyone{
    background:linear-gradient(180deg,#10E9DC 5%,#28BFFF);
    border-radius: 10px;
    padding: 30px;
    p{
      text-align: center;
      background: #fff;
      color: #4dc6c6;
      font-weight: 600;
      padding: 24px 10px;
      border-radius: 10px;
      border: 1px solid #12BF57;
    }
    .el-col{
      div{
        text-align: center;
        color: #fff;
        h6{font-size: 42px;margin-bottom: 10px;}
        span{font-size: 15px;font-weight: bold;}
      }
    }
  }
  .index_one{
    margin-top: 160px;
    .bg_index{
      display: flex;
      flex: 1;
      div{
        margin: 0 10px;
      }
      img{
        width: 100%;
      }
    }
  }
  .index_tow,.index_thr,.index_for{
    margin-top: 160px;
  }
  .index_tow{
    img{
      width: 1000px;
    }
  }
  .index_thr{
    img{
      width: 800px;
    }
  }
  .index_fiv{
    margin-top: 160px;
    padding-bottom: 110px;
    img{
      margin-top: 100px;
      width: 900px;
    }
  }
  .index_tow{margin-bottom: 200px;}
  .index_for{
    .life{
      align-items: flex-start;
      margin-bottom: 24px;
      padding: 24px;
      span{
        display: inline-block;
        color: #fff;
        padding:6px 14px;
        font-weight: 600;
        border: 1px solid #fff;
        border-radius: 20px;
        margin-bottom: 20px;
        background: #2481E2;
      }
      .gre{
        background: #71C297;
      }
      .grep{
        background: #8444EA;
      }
      p{color: #fff;font-size: 28px;margin-top: 5px;}
      .small{
        p{font-size: 18px;}
      }
      .smallp{
        font-size: 18px;
      }
      img{
        width: 30%;
        margin: 0;
      }
    }
    .life2,.life3{
      height: 460px;
      flex-direction: column;
      img{width: 100%;}
    }
    .life4{
      height: 500px;
    }
  }
}
.index_box{overflow: hidden;padding-bottom: 140px;}
.err_text{
      text-align: center;
      color: #E94F4D;
      margin-top: 10px;
    }
  .index_box h2{
    font-size: 52px;
  }
  .dec_div{
    color: #71C297;
    display: flex;
    justify-content: center;
    .el-input__icon{
      background: #71C297;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      font-size: 12px;
      line-height: 17px;
      margin-right: 2px;
    }
    p{
      margin: 20px;
    }
  }
  .search_box{
    margin-top: 0;
  }


  
</style>
